<template>
	<div>
		<h1 class='title' v-if='val.title'>{{val.title}}</h1>
		<div>
			<el-row :gutter='10'>
				<el-col :span='12' v-for="(goodsVal,index) in goodsList" :key='index'>
					<div @click='goGoods(goodsVal)' class='el-wrap' >
						<div>
							<img :src="goodsVal.goodsMainPhoto" width="100%" height='100%'>
						</div>
						<h1>{{goodsVal.goodsName}}</h1>
						<p>{{handleMoney(goodsVal.goodsCurrentPrice)}}</p>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
	import {GET_AJAX,_layer,GOODS_INFO,_money} from '@/comm.js';
	export default {
		props:['val'],
		data(){
			return ({
				goodsList:[]
			});
		},
		created(){
			JSON.parse(this.val.content).forEach((num)=>{
				//用content的值获取商品基本详情
				GET_AJAX(GOODS_INFO+num,{},(data)=>{
					data.retult?this.goodsList.push(data.data):_layer(data.message);
				});
			});
		},
		methods:{
			//去到商品详情页
			goGoods(val){
				window.open('/goods-info.html?num='+val.id);
			},
			//处理钱
			handleMoney(val){
				return _money(val);
			},
		}
	}
</script>

<style scoped>
	.title{
		padding:20px 0;
		font-size:17px;
		text-align: center;
	}
	.el-wrap{
		height:280px;
		margin-bottom:20px;
	}
	.el-wrap > div {
		width:100%;
		height:210px;
	}
	.el-wrap > h1 {
		padding:3px 12px;
		background:white;
	}
	.el-wrap > p {
		padding:3px 12px;
		color:red;
		background:white;
	}
	.fixed-top{
		position: fixed;
		width:100%;
		z-index: 2;
	}
</style>